<template>
    <page-view class="classify-page">
        <page-header title="分类">
            <span class="iconfont iconfenxiang-"></span>
        </page-header>
        <div class="content-box">
            <ul class="left">
                <li v-for="(item,index) in current_data" :key="index" :class="{active:current_index==index}"
                    @click="selectFoods(index)">{{item.cname}}</li>
            </ul>
            <div class="right" @scroll="getScrollTop($event)" ref="rightDOM">
                <div class="wrapper" ref="wrapper">
                    <div>
                        <div v-for="(item,index) in current_data" :key="index">
                            <h2 class="tilte" ref="foodsName">{{item.cname}}</h2>
                            <foods-item v-for="(_item,_index) in item.foods" :key="_index" :foods-data="_item"></foods-item>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </page-view>
</template>
<script>
    import FoodsItem from "../components/FoodsItem";
    import BScroll from "better-scroll";
    export default {
        name: "Classify",
        components: {
            FoodsItem
        },
        data() {
            return {
                current_data: [],
                current_index: 0,
                scrollTop: 0,
                scroll:null
            }
        },
        created() {
            this.getClassifyList();
        },
        activated() {
            this.$refs.rightDOM.scrollTop = this.scrollTop;
        },
        watch:{
            current_data:{
                handler(newV,oldV){
                    if(!this.scroll){
                        this.$nextTick(()=>{
                            this.scroll = new BScroll(this.$refs.wrapper,{});
                        });
                    } else {
                        this.scroll.refresh();
                    }
                }
            },
            deep:true
        },
        methods: {
            getScrollTop(event) {
                this.scrollTop = event.target.scrollTop;
            },
            selectFoods(index){
                this.current_index = index;
                this.scroll.scrollToElement(this.$refs.foodsName[index],500);
            },
            async getClassifyList() {
                const MsgPrompt = this.$msg.loading({
                    title: "正在加载中",
                    duration: -1,
                    hasMask: true,
                    position: "center"
                });
                try {
                    let result = await this.$api.classify.getClassifyList();
                    this.current_data = result.data;
                } catch (error) {
                    MsgPrompt.error("数据加载失败");
                } finally {
                    MsgPrompt.close();
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    .classify-page {
        @include flexbox(column);
       

        .content-box {
            flex: 1;
            overflow: auto;
            display: flex;
            margin-bottom: 55px;

            .left {
                width: 100px;
                background-color: lightgrey;

                >li {
                    width: 100%;
                    height: 35px;
                    @include flexbox(row, center, center);

                    &.active {
                        background-color: #fff;
                        color: $primaryColor;
                    }
                }
            }

            .right {
                flex: 1;
                overflow: auto;
                .wrapper{
                    width: 100%;
                    height: 100%;
                    overflow: auto;
                }
                .tilte {
                    color: $primaryColor;
                    padding: 5px 0 0 5px;
                    box-sizing: border-box;
                }
            }
        }
    }
</style>